<template>
    <el-row justify="start">
        <el-col :xs="24" :sm="24" :md="14" :lg="16" :xl="16">
            <el-button plain>上传</el-button>
            <el-button plain>新建</el-button>
            <el-button plain>更多</el-button>
            <el-button plain>刷新</el-button>
        </el-col>
        <el-col :xs="24" :sm="24" :md="10" :lg="8" :xl="8">
            <el-input v-model="input" placeholder="搜索...">
                <template #append>
                    <el-button type="primary" icon="el-icon-search">
                        搜索
                    </el-button>
                </template>
            </el-input>
        </el-col>
    </el-row>
    <!-- 文件列表 -->
    <el-table :data="files" border style="width: 100%">
        <el-table-column type="selection" />
        <el-table-column prop="name" label="文件名" width="500">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon :size="20" color="blue">
                        <Folder />
                    </el-icon>
                    <el-link :underline="false" type="success"><span style="margin-left: 10px">{{
                        scope.row.name }}</span></el-link>
                </div>
            </template>
        </el-table-column>
        <el-table-column v-if="showFileOrDirSize" prop="size" label="大小" />
        <el-table-column v-if="showFileOrDirDate" prop="date" label="修改日期" />
    </el-table>
</template>
<script setup>
import { ref, computed } from "vue";
import { useStore } from 'vuex';
import {
    Menu as IconMenu,
    Folder,
} from '@element-plus/icons-vue'

const store = useStore();

const showFileOrDirDate =  computed(() => store.getters['mobile/showFileOrDirDate']);
const showFileOrDirSize =  computed(() => store.getters['mobile/showFileOrDirSize']);
// main区域表格
const files = ref([
    { id: 1, name: "Photoshop CC移动UI设计实战一本通", size: "-", date: "2023-08-29 11:04" },
    { id: 2, name: "Photoshop 图像处理与制作", size: "-", date: "2023-08-29 11:04" },
    { id: 3, name: "Photoshop 2020从新手到高手", size: "-", date: "2023-08-29 11:04" },
    { id: 4, name: "ui设计素材", size: "-", date: "2023-08-01 17:44" },
    { id: 5, name: "3207622_泰思通字Word破解", size: "46.5M", date: "2024-02-28 21:49" },
    { id: 6, name: "K84.zip", size: "11.9M", date: "2024-02-28 21:26" },
    { id: 7, name: "Photoshop CC移动UI设计实战一本通", size: "-", date: "2023-08-29 11:04" },
    { id: 8, name: "Photoshop 图像处理与制作", size: "-", date: "2023-08-29 11:04" },
    { id: 9, name: "Photoshop 2020从新手到高手", size: "-", date: "2023-08-29 11:04" },
    { id: 10, name: "ui设计素材", size: "-", date: "2023-08-01 17:44" },
    { id: 11, name: "3207622_泰思通字Word破解", size: "46.5M", date: "2024-02-28 21:49" },
    { id: 12, name: "K84.zip", size: "11.9M", date: "2024-02-28 21:26" },
]); // 文件列表模拟数据

const input = ref('')

</script>
<style scoped lang="scss">
.custom-main {
    .el-col {
        border: none;
        background-color: $background-color;
        padding: 15px;
        text-align: left;
        padding-left: 0px
    }
}

</style>